<!-- 我的电子名片 -->
<template>
	<view class="invite-box">
		<!-- 二维码生成组件 -->
		<tki-qrcode 
			ref="qrcode"
			:val="qrcodeContent"
			:size="200"
			:show="false"
			:load-make="false"
			@result="onQrCodeResult"
		/>
		<view class="shareCanvasbox">
			<canvas class="shareCanvas" canvas-id="shareCanvas"></canvas>
		</view>
		<view class="codetext" @click="copyText(info.invitationCode)">
			我的邀请码(点击复制) : {{info.invitationCode}}
		</view>
		<view class="content-box">
			<view class="content-minbox">
				<image style="width: 665rpx;height: 178rpx" src="https://cdn.xnh.wanhedashuju.com/uploads/20250217/e9b4c66081d8a4837a871ce14fdedf04.png" mode=""></image>
				<view class="ewm-box">
					<view class="ewm">
						<image style="width: 100%;height: 100%;" :src="qrImageUrl" mode="aspectFill"></image>
					</view>
				</view>
				<view class="text">
					邀请好友扫码录入信息
				</view>
				<view class="xian"></view>
				<view class="info-box">
					<view class="name">
						{{info.username}}
					</view>
					<view class="texts">
						邀请好友赚积分
					</view>
				</view>
			</view>
		</view>
		<view class="bnt-box">
			<view class="save" @click="saveImg">
				保存二维码
			</view>
		</view>
	</view>
</template>

<script>
	import * as index from '@/api/index.js'
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				info: {},
				postDataUrl: '', //生成的海报
				qrImageUrl: '', //二维码图片URL
				wxappMaterialCode: 'pages/register/index' //小程序物料码基础路径
			}
		},
		computed: {
			// 拼接小程序物料码和邀请码生成二维码内容
			qrcodeContent() {
				// 确保info对象存在
				const info = this.info || {}
				const invitationCode = info.invitationCode && info.invitationCode.trim() !== '' 
					? info.invitationCode 
					: ''
				
				// 微信小程序AppID - 必须包含此参数才能跳转到指定小程序
				const appId = 'wx84c015cdc10506cc'
				// 页面路径
				const pagePath = 'pages/register/index'
				
				// 构建完整页面路径（包括参数）
				let fullPath = pagePath
				if (invitationCode) {
					fullPath += `?inviteCode=${invitationCode}`
				}
				
				// 使用标准的微信小程序URL Scheme格式
				// 这是确保能跳转到指定小程序的关键格式
				const wechatScheme = `weixin://dl/business/?appid=${appId}&path=${encodeURIComponent(fullPath)}`
				
				// 记录实际使用的路径内容，方便调试
				console.log('生成二维码内容 - 标准URL Scheme:', wechatScheme)
				
				// 返回完整的URL Scheme，确保能跳转到指定小程序
				return wechatScheme
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			// 复制邀请码
			copyText(value){
				uni.setClipboardData({
					data:value,
					success:function(){
						uni.showToast({
							icon: 'none',
							title: '复制成功！',
							duration: 2000
						});
					}
				})
			},
			// 获取用户信息
			getInfo() {
				try {
					// 从本地存储获取用户信息，如果不存在则使用空对象
					this.info = uni.getStorageSync('userinfo') || {}
					
					// 确保info对象的完整性
					if (!this.info || typeof this.info !== 'object') {
						this.info = {}
					}
					
					// 补充用户信息的默认值
					this.info.username = this.info.username || '用户'
					this.info.invitationCode = this.info.invitationCode || ''
					
					// 无论是否有邀请码，都调用generateQrCode方法
					// generateQrCode内部会处理内容为空的情况
					this.generateQrCode()
				} catch (error) {
					console.error('获取用户信息时出错:', error)
					// 发生错误时，创建一个包含默认值的info对象
					this.info = {
						username: '用户',
						invitationCode: ''
					}
					// 仍然尝试生成二维码
					this.generateQrCode()
				}
			},
			// 生成二维码
			generateQrCode() {
				if (!this.$refs.qrcode) {
					console.warn('二维码组件未加载完成')
					return
				}
				
				// 确保二维码内容不为空
				let contentToUse = ''
				if (this.qrcodeContent && this.qrcodeContent.trim() !== '') {
					contentToUse = this.qrcodeContent
					console.log('使用计算属性内容生成二维码:', contentToUse)
				} else {
					// 使用默认内容作为回退
					contentToUse = 'pages/register/index' // 直接使用正确路径，不再依赖wxappMaterialCode
					console.warn('使用默认内容生成二维码:', contentToUse)
				}
				
				// 直接修改组件的val属性并调用生成方法
				try {
					// 临时保存原始val值
					const originalVal = this.$refs.qrcode.val
					// 设置有效的内容
					this.$refs.qrcode.val = contentToUse
					// 调用生成方法
					this.$refs.qrcode._makeCode()
					// 恢复原始值（可选，取决于需求）
					// this.$refs.qrcode.val = originalVal
				} catch (error) {
					console.error('生成二维码时出错:', error)
					// 如果出错，显示加载中的提示，避免白屏
					uni.showLoading({
						title: '二维码生成中...',
						mask: true
					})
					// 2秒后自动隐藏
					setTimeout(() => {
						uni.hideLoading()
					}, 2000)
				}
			},
			// 二维码生成结果回调
			onQrCodeResult(res) {
				this.qrImageUrl = res
				// 延迟绘制海报，确保二维码已经生成
				setTimeout(() => {
					this.createCanvasImage(res)
				}, 200)
			},
			// 保存图片到相册
			saveImg(){
				let that = this
				//获取授权列表，查看是否授权写入相册权限
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope:'scope.writePhotosAlbum',
								success() {
									that.saveimgtoAlbum(that.postDataUrl)
								}
							})
						} else if (that.postDataUrl) {
							that.saveimgtoAlbum(that.postDataUrl)
						} else {
							uni.showToast({
								title: '二维码正在生成中，请稍候',
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			},
			// 保存图片到相册的具体实现
			saveimgtoAlbum(imgurl){
				//图片保存到本地
				let that = this
				uni.showLoading({
					title: '保存中...'
				})
				uni.saveImageToPhotosAlbum({
					filePath: imgurl,
					success: function (data) {
						uni.hideLoading()
						uni.showToast({
							title: '保存成功',
							icon: 'success',
							duration: 2000
						})
					},
					fail: function (err) {
						uni.hideLoading()
						if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
							uni.openSetting({
							success(settingdata) {
								if (settingdata.authSetting['scope.writePhotosAlbum']) {
									uni.showToast({
										title: '您已授权成功，请重新保存海报',
										icon: 'success',
										duration: 2000
									})
								} else {
									uni.showToast({
										title: '尚未授权，无法保存海报',
										icon: 'none',
										duration: 2000
									})
								}
							}
						})
					}
				},
				complete(res){
					console.log('保存图片结果:', res);
				}
				})
			},
			//绘制海报
			createCanvasImage(e) {
				var str = 1
				var ctx = uni.createCanvasContext('shareCanvas', this)

				// 背景图
				ctx.drawImage('../../../static/user/ewmbg.png', 0, 0, 710 * str, 1090 * str)
				
				// 绘制二维码
				ctx.drawImage(e, 131* str, 303* str, 450* str, 450* str)
				
				//绘制姓名
				ctx.font = '600 32px sans-serif' // 字体
				ctx.setFillStyle('#000')
				ctx.fillText(this.info.username || '用户', 295* str, 940* str)
				ctx.draw(true, (ret) => { // draw方法 把以上内容画到 canvas 中。
					uni.canvasToTempFilePath({ // 保存canvas为图片
						canvasId: 'shareCanvas',
						quality: 1,
						success: (res) => {
							this.postDataUrl = res.tempFilePath.replace(/[\r\n]/g, '')
							console.log('海报生成成功:', this.postDataUrl)
						}
					})
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.shareCanvasbox{
		position: absolute;
		top: -1090px;
		left: -710px;
		z-index: -999;
		opacity: 0;
	}
	.shareCanvas {
		width: 710px;
		height: 1090px;
	}
	
	.invite-box {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background-color: #F1344C;
		height: 100vh;
		.codetext {
			color: #FFF;
			font-family: "PingFang SC";
			font-size: 40rpx;
			font-style: normal;
			font-weight: 500;
			padding-bottom: 20rpx;
		}
		.content-box {
			height: 1050rpx;
			border-radius: 16rpx;
			background: #FFF;
			padding: 20rpx;
				
			.content-minbox {
				width: 670rpx;
				height: 1050rpx;
				border-radius: 14rpx;
				border:  1px dotted #B0B8C1;
				display: flex;
				align-items: center;
				flex-direction: column;
				.ewm-box {
					margin-top: 61rpx;
					width: 487rpx;
					height: 487rpx;
					border-radius: 20rpx;
					background: #EAEDFB;
					display: flex;
					align-items: center;
					justify-content: center;
					.ewm {
						width: 450rpx;
						height: 450rpx;
						background: #FFF;
					}
				}
				.text {
					margin-top: 20rpx;
					color: #999;
					font-size: 28rpx;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
				}
					
				.xian {
					margin-top: 50rpx;
					width: 599rpx;
					height: 1px;
					background: #EAEDFB;
				}
				.info-box {
					margin-top: 40rpx;
					display: flex;
					align-items: center;
					flex-direction: column;
					.name {
						color: #000;
						font-size: 40rpx;
						font-weight: bold;
					}
					.texts {
						margin-top: 7rpx;
						color: #4787FF;
						font-size: 32rpx;
						font-weight: 500;
					}
				}
			}
		}
		.bnt-box {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			.save {
				width: 350rpx;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #4787FF;
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
				border-radius: 16rpx;
				background: #FFF;
			}
			.share {
				margin-left: 18rpx;
				width: 350rpx;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #4787FF;
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
				border-radius: 16rpx;
				background: #FFF;
			}
		}
	}
</style>